﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="jsPlugDemo_uploadify_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="../../js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../../js/plugin/uploadify/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
    <script src="../../js/swfobject.js" type="text/javascript"></script>
    <link href="../../js/plugin/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #fileQueue { float: left; width: 400px; height: 300px; overflow: auto; border: 1px solid #E5E5E5; margin-bottom: 10px; }
        #imgList { float: left; width: 400px; height: 300px; }
    </style>
    <script type="text/javascript">

        $(document).ready(function () {

            $("#fileInput").uploadify({
                'uploader': '/js/plugin/uploadify/uploadify.swf',
                'script': '/js/plugin/uploadify/UploadHandler.ashx?a=upload',
                'cancelImg': '/js/plugin/uploadify/cancel.png',
                'folder': '/upload',
                'queueID': 'fileQueue',
                'auto': false,
                'multi': true,
                'method': 'POST',
                'queueSizeLimit': 3,                       //队列个数限制
                'fileDesc': '请选择jpg,jpeg或gif格式图片',  //出现在上传对话框中的文件类型描述
                'fileExt': '*.jpg;*.jpeg;*.gif'            //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
                , 'buttonText': 'Upload Photo'
                , 'scriptData': { 'name': 'value' }
                /*, onAllComplete: function (event, data) {
                var msg = "The total number of files uploaded：" + data.filesUploaded
                + "  ,<br>The total number of errors while uploading: " + data.errors
                + "  ,<br>The total number of bytes uploaded: " + data.allBytesLoaded
                + "  ,<br>The average speed of all uploaded files: " + data.speed

                $('#fileMsg').html(msg);
                }*/
                , onComplete: function () {

                    var jsonData = eval(arguments[3]);
                    $.each(jsonData, function (i, n) {
                        //$('#fileMsg').html(n);
                        $("<img width=100 height=100 />").attr("src", n).appendTo($('#imgList'));
                    });

                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="file" name="fileInput" id="fileInput" />
    <div style="clear: both;">
    </div>
    <div id="fileQueue">
    </div>
    <div id="imgList">
    </div>
    <div style="clear: both;">
    </div>
    <div id="fileMsg">
    </div>
    <a href="javascript:$('#fileInput').uploadifyUpload();">上传文件</a> | <a href="javascript:$('#fileInput').uploadifyClearQueue
();">清空队列</a>
    <div style="margin-top: 30px;">
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:Button ID="btnOK" runat="server" Text="提交表单" OnClick="btnOK_Click" />
    </div>
    </form>
</body>
</html>
